import React, { Component, createRef } from 'react'

export default class App extends Component {
  // !#1 往【实例】上挂载了一个属性叫 inputRef，对应的值是 createRef() 的返回值
  inputRef = createRef()
  handleChange(e) {
    // 这样就能拿到非受控的 input 的数据啦
    // console.log(e.target.value)
  }
  handleClick = () => {
    // 获取 DOM 第一种方式
    // console.log(document.querySelector('input').value)
    // !#3 获取 DOM => this.inputRef.current
    console.log(this.inputRef.current.value)
  }
  render() {
    return (
      <div>
        {/* 获取非受控的 input 输入的内容 */}
        {/* //!#2 把 this.inputRef 和 ref 属性进行绑定 */}
        <input ref={this.inputRef} type='text' onChange={this.handleChange} />
        <button onClick={this.handleClick}>获取input中的数据</button>
      </div>
    )
  }
}
